<template>
	<view>
		<searchBox id="searchBox" :class="isCeiling?'ceiling-white':''"></searchBox>
		
		<view class="cu-list typeList menu card-menu bg-white" v-for="(item,index) in typeList" :key="index">
			<navigator class="cu-item arrow" hover-class="none" url="/pages/index/index" open-type="switchTab">
				<view class="content">
					<text class="">{{item.name}}</text>
				</view>
			</navigator>
			<view class="flex">
				<view class="flex-sub bg-grey light padding-sm margin-sm radius" v-for="item2 in item.child" :key="item2.id">{{item2.name}}</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isCeiling:false,
				searchBoxScroll:0,
				typeList:[
					{id:1,name:"在线视频课程",child:[]},
					{id:2,name:"材料包",child:[]},
					{id:3,name:"香薰蜡烛成品",child:[]},
					{id:4,name:"精油手工皂成品",child:[{id:5,name:"功效皂",child:[]},{id:6,name:"设计款皂",child:[]}]}
				]
			};
		},
		mounted() {
			console.log('mounted 组件挂载完毕状态===============》');
			const query = uni.createSelectorQuery().in(this);
			query.select('#searchBox').boundingClientRect(data => {
			console.log("得到布局位置信息" + JSON.stringify(data));
			console.log("节点离页面顶部的距离为" + data.top);
			this.searchBoxScroll = data.top
			}).exec();
		},
		onPageScroll:function(e){
			if(e.scrollTop > this.searchBoxScroll){
			this.isCeiling = true;
			}else{
			this.isCeiling = false;
			}
		}
	}
</script>

<style lang="scss">
	
</style>
